<template>
	<view>
		<view class="context">
			<view class="back" @click="back">
				<uni-icons type="back" color="#e1e1e1" size="32"></uni-icons>
			</view>
			<view @click="updateImg" class="main-image" :style="'background-image: url(' + obj.img +')'">

			</view>
			<view class="main">
				<view class="info">
					<view class="avatar" @tap="updateAvatar">
						<image :src="obj.avatar" mode="heightFix"></image>
					</view>
					<view class="gender" :style="'background-color: '+ (obj.gender ? '#ff8785' : '#137C92') +';'">
						<text :class="gender" :style="'color: '+ (obj.gender ? '#f4e9e0' : '#f4e9e0') +';'"></text>
					</view>
					<view class="nickname">
						{{obj.nickname}}
					</view>
					<view class="summary">
						{{obj.summary}}
					</view>
					<view class="modify" @click="modifyInfo" :style="'background-color: '+ (obj.gender ? '#ff8785' : '#137C92') +';'">
						编辑资料
					</view>
				</view>



			</view>

		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				obj: {},
				gender: 'iconfont icon-nan',
				self: true
			}
		},
		methods: {
			init() {
				uni.getStorage({
					key: 'user-obj',
					success: res => {
						this.obj = res.data
					}
				})
			},
			getOthers(){
				this.get("user/one/2", null, res => {
					this.obj = res.data.user
				})
			},
			back() {
				uni.navigateBack({})
			},
			modifyInfo() {
				uni.navigateTo({
					url: '../modify-info/modify-info',
					animationType: 'slide-in-right'
				})
			},
			updateImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						const src = res.tempFilePaths[0];

						uni.redirectTo({
							url: '../upload-img/upload-img?src=' + src
						});
					}
				});
			},
			updateAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						const src = res.tempFilePaths[0];

						uni.redirectTo({
							url: '../upload/upload?src=' + src
						});
					}
				});
			},
		},
		onLoad(option) {
			if (option.other === '1') {
				this.self = false
				this.getOthers()
			}
		},
		onShow() {
			if(this.self)
				this.init()
		}
	}
</script>

<style lang="scss">
	.context {
		padding: 40rpx 0; // 内边框 // 上下 40rpx 左右 30rpx
		position: absolute; // 决定定位  -》 根据整个页面进行定位
		top: 0;
		overflow: hidden;
		left: 0;

		.back {
			position: fixed;
			top: 60rpx;
			left: 30rpx;
			z-index: 99; // 层级


		}

		.main-image {
			height: 400rpx; // 高度 rpx -> 动态的px
			position: relative; // 相对定位
			width: 750rpx;
			top: -40rpx;
			background-position: center;
			background-size: cover;
			left: 0;
			z-index: 0;
		}

		.main {
			position: relative;
			background-color: #fbf9fd;
			top: -70rpx;
			left: 0;
			border-top-left-radius: 18rpx;
			border-top-right-radius: 18rpx;

			.info {
				position: relative;
				top: -100rpx;
				display: flex;
				flex-direction: column;
				padding: 0 40rpx;
				align-content: center;
				left: 0;

				.avatar {
					width: 200rpx;
					height: 200rpx;
					border: #FFFFFF 5rpx solid;
					border-radius: 50%;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
					}
				}

				.gender {
					position: relative;
					top: -45rpx;
					left: 150rpx;
					width: 40rpx;
					height: 40rpx;
					background-color: #fbf9fd;
					line-height: 40rpx;
					text-align: center;
					border-radius: 50%;
					border: 3rpx solid #FFF;

					text {
						font-size: $uni-font-size-sm;
					}
				}

				.nickname {
					font-size: 50rpx;
					font-weight: 900;
				}

				.summary {
					padding-top: 20rpx;
					font-size: $uni-font-size-base;
					color: $uni-text-color-placeholder;
				}

				.modify {
					position: relative;
					top: -230rpx;
					left: 520rpx;
					width: 165rpx;
					font-size: $uni-font-size-base;
					text-align: center;
					padding: 10rpx 0;
					border-radius: 40rpx;
					color: #FFF;
				}
			}

		}
	}
</style>
